<template>
  <div class="bg-box">
    <t-table
      row-key="index"
      table-layout="auto"
      class="plugin-reports-pay-table"
      :data="list"
      :columns="columns"
      :footData="[total]"
      hover
    >
      <template #time="{ rowIndex }">
        <div class="time">{{ time[rowIndex] }}</div>
      </template>

      <template v-for="item in pay" #[slotPayName(item.id)]="{ row }">
        {{ app.money.format(row[item.id]?.m ?? 0) }}<t-divider layout="vertical" />{{ row[item.id]?.c ?? 0 }}
      </template>

      <template #other="{ row }">
        {{ app.money.format(row[0]?.m ?? 0) }}<t-divider layout="vertical" />{{ row[0]?.c ?? 0 }}
      </template>

      <template #total="{ row }">
        <b>{{ app.money.format(row.total?.m ?? 0) }}<t-divider layout="vertical" />{{ row.total?.c ?? 0 }}</b>
      </template>

      <template v-for="item in pay" #[slotFootName(item.id)]="{ row }">
        {{ app.money.format(total[item.id]?.m ?? 0) }}<t-divider layout="vertical" />{{ total[item.id]?.c ?? 0 }}
      </template>
      
      <template #footOther>
        {{ app.money.format(total[0]?.m ?? 0) }}<t-divider layout="vertical" />{{ total[0]?.c ?? 0 }}
      </template> 

      <template #footTotal>
        <div class="total" style="text-align: right">{{ app.money.format(total.total?.m ?? 0) }}<t-divider layout="vertical" />{{ total.total?.c ?? 0 }}</div>
      </template> 
    </t-table>
  </div>
</template>
<script setup>
  import app from '@/app'
  import index from '../../index'

  const props = defineProps(['pay', 'total', 'list', 'time'])
  const plugin = index.plugin

  const slotPayName = (id) => 'pay-' + id
  const slotFootName = (id) => 'foot-' + id

  const columns = [{
    colKey: 'time',
    cell: 'time'
  }, 
  ...props.pay.map(item => {
    return {
      title: item.name,
      colKey: item.id,
      cell: slotPayName(item.id),
      foot: slotFootName(item.id)
    }
  }), {
    title: plugin.t('pay.other'),
    colKey: 'other',
    cell: 'other',
    foot: 'footOther'
  }, {
    title: plugin.t('pay.total'),
    colKey: 'total',
    align: 'right',
    fixed: 'right',
    foot: 'footTotal'
  }]
</script>
<style lang="scss">
  @import '@/style/global';

  .plugin-reports-pay-table{
    .time{
      color: $color-content;
    }
    .total{
      color: $color;
      font-weight: bold;
    }
  }
</style>